<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width=400
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">
    <a-form>
      <a-form-item>
        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
          <a-alert type="info" :showIcon="true">
            <div slot="message">
              <span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
              <span v-else style="color:#959595">请选择</span>
              <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
            </div>
          </a-alert>
          <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
          <!-- 树-->
          <a-spin :spinning='Loading'>
            <a-col class="treeHeight" :md="24" :sm="24">
              <a-tree
                checkable
                multiple
                @check="onCheck"
                :checkedKeys="checkedKeys"
                :treeData="departTree"
                :checkStrictly="checkStrictly"
                :expandedKeys="iExpandedKeys"
                :autoExpandParent="autoExpandParent"
                @expand="onExpand"/>
            </a-col>
          </a-spin>
        </div>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
          <!--          <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>-->
          <!--          <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>-->
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>
          树操作
          <a-icon type="up"/>
        </a-button>
      </a-dropdown>
      <!--      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">-->
      <!--        <a-button style="margin-right: .8rem">取消</a-button>-->
      <!--      </a-popconfirm>-->
      <a-button @click="handleSubmit(false)" style="margin-right: 0.8rem">取消选择
      </a-button>
      <a-button @click="handleSubmit(true)" type="primary"  style="margin-right: 0.8rem">确认选择
      </a-button>
      <!--      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>-->
      <!--      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>-->
    </div>
  </a-drawer>

</template>
<script>
  import {queryDepartTreeList, searchByKeywords} from '@/api/api'

  export default {
    name: "RoleModal",
    components: {},
    data() {
      return {
        title: "所在机构",
        visible: false,
        hiding: true,
        treeData: [],
        departTree: [],
        allTreeKeys: [],
        checkedKeys: [],
        checkedLables: [],
        selectedKeys: [],
        autoIncr: 1,
        currSelected: {},
        iExpandedKeys: [],
        checkStrictly: false,
        model: {},
        autoExpandParent: true,
        Loading: false
      }
    },
    methods: {
      show() {
        this.visible = true;
      },
      close() {
        this.visible = false;
      },
      handleSubmit(exit) {
        if (exit) {
          this.$emit('ok', this.checkedKeys)
          this.close()
        } else {
          this.onClearSelected()
          this.$emit('ok', {departName: '', id: ''})
          this.close()
        }
      },
      getCurrSelectedTitle() {
        return !this.currSelected.title ? '' : this.currSelected.title
      },
      onExpand(expandedKeys) {
        console.log('onExpand', expandedKeys)
        this.iExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onSearch(value) {
        let that = this
        if (value) {
          searchByKeywords({keyWord: value}).then((res) => {
            if (res.success) {
              that.departTree = []
              for (let i = 0; i < res.result.length; i++) {
                let temp = res.result[i]
                that.departTree.push(temp)
              }
            } else {
              that.$message.warning(res.message)
            }
          })
        } else {
          that.loadTree()
        }
      },
      onClearSelected() {
        this.checkedKeys = []
        this.currSelected = {}
        this.selectedKeys = []
      },
      onCheck(checkedKeys, info) {
        console.log('onCheck', checkedKeys, info)
        this.hiding = false
        //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
        if (this.checkStrictly) {
          this.checkedKeys = checkedKeys.checked;
        } else {
          this.checkedKeys = checkedKeys
        }
        //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
      },
      onSelect(selectedKeys, e) {
        console.log('selected', selectedKeys, e)
        this.hiding = false
        let record = e.node.dataRef
        console.log('onSelect-record', record)
        this.currSelected = Object.assign({}, record)
        this.model = this.currSelected
        this.selectedKeys = [record.key]
        this.model.parentId = record.parentId

      },
      setThisExpandedKeys(node) {
        this.iExpandedKeys.push(node.key)
        // if (node.children && node.children.length > 0) {
        //   this.iExpandedKeys.push(node.key)
        //   for (let a = 0; a < node.children.length; a++) {
        //     this.setThisExpandedKeys(node.children[a])
        //   }
        // }
      },
      loadTree() {
        this.Loading = true
        var that = this
        that.treeData = []
        that.departTree = []
        queryDepartTreeList().then((res) => {
          if (res.success) {
            //部门全选后，再添加部门，选中数量增多
            this.allTreeKeys = [];
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.treeData.push(temp)
              that.departTree.push(temp)
              that.setThisExpandedKeys(temp)
              that.getAllKeys(temp);
            }
            this.Loading = false
          }
        })
      },
      expandAll() {
        this.iExpandedKeys = this.allTreeKeys
      },
      closeAll() {
        this.iExpandedKeys = []
      },
      checkALL() {
        this.checkStriccheckStrictlytly = false
        this.checkedKeys = this.allTreeKeys
      },
      cancelCheckALL() {
        //this.checkedKeys = this.defaultCheckedKeys
        this.checkedKeys = []
      },
      switchCheckStrictly(v) {
        if (v == 1) {
          this.checkStrictly = false
        } else if (v == 2) {
          this.checkStrictly = true
        }
      },
      getAllKeys(node) {
        // console.log('node',node);
        this.allTreeKeys.push(node.key)
        if (node.children && node.children.length > 0) {
          for (let a = 0; a < node.children.length; a++) {
            this.getAllKeys(node.children[a])
          }
        }
      }
    },
    watch: {
      visible() {
        if (this.visible) {
          this.loadTree();
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

  .ant-drawer {
    /deep/ .ant-drawer-body {
      padding: 10px
    }
  }

  .treeHeight {
    height: ~"calc(100vh - 215px)";
    overflow: auto;
  }

</style>